<template>
	<view class="settle">
		<!--  -->
		<view class="info_tab">
			<view class="">
				<view class="access_input">
					<view class="access_input_name">邮箱:</view> <input type="text" v-model="email"
						placeholder="请输入邮箱" />
				</view>
				<view class="access_input">
					<view class="access_input_name">姓名:</view> <input type="text" v-model="name"
						placeholder="请输入姓名" />
				</view>
				<view class="access_input">
					<view class="access_input_name">身份证号:</view> <input type="text" v-model="num"
						placeholder="请输入身份证号" />
				</view>
			</view>
			<view class="lice_image" style="display: flex;justify-content:space-between;">
				<u-upload :fileList="face_url" @afterRead="files => afterRead(1, files)"
				width="300rpx" @delete="files => deletePic(1, files)" multiple :maxCount="1">
				<image style="width: 50%;" src="/static/font.png" mode="widthFix"></image>
				<view class="tips">
					<span style="color: red;">*</span> 请上传身份证正面
				</view>
				</u-upload>
				<u-upload :fileList="emblem_url" @afterRead="files => afterRead(2, files)"
				width="300rpx" @delete="files => deletePic(2, files)" multiple :maxCount="1">
				<image style="width: 50%;margin-left: 10rpx;" src="/static/font.png" mode="widthFix"></image>
				<view class="tips">
					<span style="color: red;">*</span> 请上传身份证反面
				</view>
				</u-upload>
			</view>
		</view>
		<!--  地址-->
		<view class="btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				name:"",
				num:"",
				email:"",
				emblem:"",
				face:"",
				face_url:[],
				emblem_url:[]
			}
		},
		mounted() {
			
		},
		methods: {
			afterRead(index, file) {
				const maxSize = 5 * 1024 * 1024; // 2MB
				if (file.file[0].size > maxSize) {
					uni.showToast({
						title: '文件大小不能超过 5MB',
						icon: 'none'
					})
					return;
				}
				this.upLoad(index, file)
			},
			deletePic(index, file) {
				// console.log(index, file)
				const indexs = file.index
				if (index == 1) {
					this.face_url = this.face_url.filter((_, i) => i !== indexs)
					this.face = ''
				}else{
					this.emblem_url=this.emblem_url.filter((_, i) => i !== indexs)
					this.emblem=''
				}
			},
			async upLoad(index, event) {
				const {
					file
				} = event;
				// console.log(file[0].url.substring(file[0].url.lastIndexOf('/') + 1));
				// return
				const fileName =file[0].url.substring(file[0].url.lastIndexOf('/') + 1)
				const res = await request('/v1/oss', 'GET', {
					file: fileName
				},'sts');
				this.hostUrl = res.body
				const formData = {
					key: `${res.body.dir.replace(/^\/+/, '')}`,
					OSSAccessKeyId: res.body.accessid,
					policy: res.body.policy,
					signature: res.body.signature,
					success_action_status: 200,
					// keys: res.body.path,
				};
				let that = this
				uni.uploadFile({
					url: res.body.host, // 替换为你的服务器地址
					filePath: file[0].url,
					name: 'file',
					formData: formData,
					success: (res) => {
						const uploadedFileUrl = that.hostUrl.host + '/' + formData.key
						if (index == 1) {
							that.face_url = [{
								url: uploadedFileUrl
							}]
							that.face=uploadedFileUrl
						}else{
							that.emblem_url = [{
								url: uploadedFileUrl
							}]
							that.emblem=uploadedFileUrl
						}
					},
					fail: (err) => {
						console.log('上传失败', err);
					}
				})
			},
			//ocr
			// async ossOcr(index) {
			// 	if (index == 1) {
			// 		const res = await request('/v1/ocr', 'POST', {
			// 			type: 'license',
			// 			url: this.license_url.map(item => item.url)[0]
			// 		});
			// 		if (res) {
			// 			console.log(res);
			// 			const data = res.body
			// 			this.license = {
			// 				name: data.name,
			// 				register_number: data.reg_num, //执照号
			// 				license_type: data.valid_period == '29991231' ? 0 : 1, //有效期类型
			// 				establish_date: this.convertDateFormat(data.establish_date), //注册日期
			// 				valid_period: this.convertDateFormat(data.valid_period),
			// 				address: data.address, //注册地址
			// 				license_image_url: this.license_url.map(item => item.url)[0]
			// 			}
			// 			this.license_type_name = data.valid_period == '29991231' ? '长期' : '短期'
			// 		}
			// 	}

			// },
			onShowToast(name) {
				uni.showToast({
					title: name + '不能为空',
					icon: 'none'
				})
			},
			async submit() {
				if(!this.name) return this.onShowToast("姓名")
				if(!this.num) return this.onShowToast("身份证号")
				if(!this.face) return this.onShowToast("身份证正面")
				if(!this.emblem) return this.onShowToast("身份证反面")
				try {
					const response = await request('/v1/user', 'POST',
					{
						name:this.name,
						num:this.num,
						email:this.email,
						face:this.face,
						emblem:this.emblem
					},
					'check'); // 只需要传递相对路径
					uni.showToast({
						title:"成功",
						icon: 'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				} catch (error) {
					console.error('请求失败:', error);
				}
			}
		}
	}
</script>

<style>
	.settle {
		padding: 0 36rpx;
		background: #f4f4f4;
		min-height: 100vh;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		padding-top: 24rpx;
	}

	.settle_title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		padding: 32rpx 0;
		/* margin-bottom: ; */
	}

	.info_tab {
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		/* margin-top: 24rpx; */
	}

	.lice {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		/* margin-top: 32rpx; */
	}

	.lice text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.lice_image {
		/* width: 100%; */
		margin: 0 auto;
		margin-top: 30rpx;
	}
	.tips{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		margin-top: 14rpx;
		text-indent: 20rpx;
		/* text-align: center; */
	}
	.access_input {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F6F6F6;
		padding: 24rpx 0;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.access_input .access_input_name {
		width: 29%;
	}

	.access_input input {
		width: 70%;
		text-align: left;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 40rpx;
		font-style: normal;

	}

	.btn {
		width: 95%;
		height: 88rpx;
		margin: 0 auto;
		background:linear-gradient( 314deg, #FF6F55 0%, #FF8841 100%);
		border-radius: 16rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		margin-top: 68rpx;
		margin-bottom: 24rpx;
	}
</style>